<script setup lang="ts">
  import { ref } from 'vue'
  import { ElMessage, FormInstance, UploadFile } from 'element-plus'
  import { useServiceProcessForm } from './services'
  import { orderAnnexUpload } from '@/api/upload'
  import ploadDefaultImg from '@/assets/image/avatar_upload_default.png'

  const { form, submit, submitLoading } = useServiceProcessForm()

  const rules = ref({
    note: [
      {
        required: true,
        message: '请输入备注',
        trigger: ['blur', 'change'],
      },
    ],
    visitTypes: [
      {
        required: true,
        message: '请选择可见类型',
        trigger: ['blur', 'change'],
      },
    ],
  })

  const formRef = ref<FormInstance | null>(null)

  const tempForm = ref<{ note: string; fileList: Array<UploadFile>; visitTypes: Array<number> }>({
    note: '',
    fileList: [],
    visitTypes: [0],
  })

  const handleUploadImg = (file: UploadFile) => {
    const fileReader = new FileReader()
    fileReader.readAsDataURL(file.raw)
    fileReader.onload = () => {
      if (tempForm.value.fileList.length + 1 > 5) {
        ElMessage({
          type: 'error',
          message: '最多只能上传5张图片',
          grouping: true,
          plain: true,
          duration: 5000,
          showClose: true,
        })
        return false
      }
      tempForm.value.fileList.push(Object.assign(file, { url: fileReader.result }))
    }
  }

  const handleRemoveImg = (file: UploadFile) => {
    const index = tempForm.value.fileList.findIndex((item) => item.url === file.url)
    tempForm.value.fileList.splice(index, 1)
  }

  defineExpose({
    submitLoading,
    submit: async (orderIds: Array<string>) => {
      if (!formRef.value) {
        return null
      }
      try {
        await formRef.value.validate()
        submitLoading.value = true
        form.value.remark = tempForm.value.note
        form.value.visitTypes = tempForm.value.visitTypes
        const attachments = tempForm.value.fileList.map((file) => {
          return file.raw
        })
        const uploadImgResult = await orderAnnexUpload(attachments)
        form.value.annexs = uploadImgResult.data.data.rows
        return await submit(orderIds)
      } catch (error) {
        return null
      }
    },
  })
</script>

<template>
  <el-form
    ref="formRef"
    class="modal_form_content"
    :rules="rules"
    :model="tempForm"
    label-position="top"
    inline-message
  >
    <el-form-item label="可见类型" prop="visitTypes" class="same_line">
      <el-checkbox-group v-model="tempForm.visitTypes">
        <el-checkbox :value="0" size="small">公开</el-checkbox>
        <el-checkbox :value="1" size="small">部门可见</el-checkbox>
        <el-checkbox :value="2" size="small">工程师可见</el-checkbox>
        <el-checkbox :value="3" size="small">公司可见</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="工单备注" prop="note">
      <el-input
        v-model.trim="tempForm.note"
        type="textarea"
        placeholder="请填写备注"
        maxlength="200"
        show-word-limit
        resize="both"
      />
    </el-form-item>

    <el-form-item label="备注附件">
      <div class="img_container">
        <div v-show="tempForm.fileList.length > 0" class="imgs">
          <template v-for="(file, fileIndex) in tempForm.fileList" :key="fileIndex">
            <HImage
              :src="file.url"
              :initial-index="fileIndex"
              :preview-src-list="tempForm.fileList.map((item) => item.url)"
              :width="80"
              :height="50"
              :padding="2"
              :mask-btn-gap="5"
              @del="handleRemoveImg(file)"
            />
          </template>
        </div>
        <h-image
          v-if="tempForm.fileList.length < 5"
          :width="80"
          :height="50"
          :padding="2"
          :src="ploadDefaultImg"
        >
          <el-upload
            :auto-upload="false"
            list-type="picture-card"
            :show-file-list="false"
            accept="image/*"
            multiple
            @change="handleUploadImg"
          >
            <i class="iconfont icon-img-upload"></i>
          </el-upload>
        </h-image>
      </div>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
  :deep(.el-textarea) {
    .el-textarea__inner {
      min-height: 75px !important;
      width: 100% !important;
      max-height: 140px !important;
      overflow: hidden;
    }
  }

  :deep(.el-upload) {
    width: 50px;
    height: 50px;
    background: none;
    border: none;
  }

  .img_container {
    display: flex;
    gap: 5px;

    :deep(.el-upload) {
      width: 50px;
      height: 50px;
    }

    .imgs {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }

    .iconfont {
      color: #fff;
      font-size: 20px;
    }
  }
</style>
